<template>
  <div class="home-container">
    <h1 class="welcome-title">欢迎来到“圣宸小说”平台</h1>
    <br>
    <el-carousel :interval="2000" type="card" height="400px">
      <el-carousel-item v-for="item in carouselImages" :key="item">
        <img :src="getImageUrl(item)" class="carousel-image" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const carouselImages = ref([
  'picture1.jpeg',
  'picure2.jpeg',
  'picure3.jpg',
  'picure4.webp',
]);

const getImageUrl = (name) => {
  return `/img/${name}`;
};
</script>

<style scoped>
.home-container {
  text-align: center;
  padding-top: 50px;
}

.welcome-title {
  margin-top: 40px;
  font-size: 2.5em;
  color: #333;
  font-weight: bold;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>